import React, {Component} from 'react'
import {withRouter} from 'react-router'
import {ajax} from '../util'
import Header from './Header'
import Loading from './Loading'

@withRouter
export default class ReportModuleList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
      isLoading: false
    }
  }

  componentDidMount() {
    this.setState({
      isLoading: true
    })
    ajax({
      url: '/system/api/v1/modules/multilanguage/REPORT_MODULES?locale=zh-CN&size=999'
    }, data => {
      this.setState({
        isLoading: false
      })
      let zhCNList = data.payload.content.filter(item => item.LOCALE == 'zh-CN')
      this.setState({list: zhCNList})
    }, err=> {
      this.setState({
        isLoading: false
      })
    })

  }

  render() {
    return (
      <div >
        <Header title="报表表单管理"/>
        <div className="mui-content">
          {this.renderList()}
          <Loading loading={this.state.isLoading}/>
        </div>
      </div>
    )
  }

  renderList = ()=> {
    console.info(this.state.list)
    return (
      <ul className="mui-table-view">
        {
          this.state.list.map(item => (
            <li className="mui-table-view-cell" key={item.ID}
                onClick={this.toGraph.bind(this, item.ID, item.NAME)}>
              <a className="mui-navigate-right">
                {item.NAME}
              </a>
            </li>
          ))
        }
      </ul>
    )
  }
  //进入报表详情
  toGraph = (id, name)=> {
    this.props.router.push({
      pathname: '/report-chart',
      query: {
        id: id,
      }
    })
  }

}
